﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Datos Generales</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection"/>
<link href="css/print.css" rel="stylesheet" type="text/css" media="screen, projection"/>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />	
<!--[if lt IE 8]>
<link href="css/ie.css" rel="stylesheet" type="text/css" media="print"/>
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript">
			$(document).ready(inicio);
			
			function changeFocus(targ){
				var inputs = $('#identificacion').eq(0).find(":input");
                    var idx = inputs.index(targ);
					if (idx == inputs.length - 1) {
                        inputs[0].select()
                    } else {
                        inputs[idx + 1].focus(); //  handles submit buttons
                        try{
									inputs[idx + 1].select();	
								}
                        catch(e){
							//Do nothing
						}
                    }
            }
			
			function inicio(){
			
				$('input,select').live("keypress", function(e) {
					
                /* ENTER PRESSED*/
                if (e.keyCode == 13) {
                    /* FOCUS ELEMENT */
					changeFocus(this);
                    e.preventDefault();
                }
            });
	
			}
				
			$(function(){

				// Datepicker
				$('.date').datepicker({
					dateFormat: 'yy-mm-dd',
					changeMonth: true,
					changeYear: true,
					yearRange: 'c-110:c',
					onClose: function(dateText, inst){
						changeFocus(this);
					}
				});
				$(function() {
					$("#tabs").tabs();
					$("#tabslist").removeClass('ui-widget-header');
				});
				
			});
</script>
</head>

<body>
	<div class="span-19 container" id="tabs">
		<div class="span-19 container ui-corner-all ui-widget-header">
			<div class="span-14">
				<ul id="tabslist">
					<li><a href="#DatosBasicosDelPaciente">Datos básicos</a></li>
					<li><a href="#Eventos">Eventos</a></li>
				</ul>
			</div>
			<div class="span-4 last">
				Nombre del paciente
			</div>
		</div>
		<div class="span-18" id="DatosBasicosDelPaciente">
		    <form id="identificacion" action="" method="post">
				<fieldset>
				<legend>Identificacion Del Paciente</legend>
					<table>
						<tr>
							<td><label>Tipo de Documento</label><br/>
		    		  			<select id="tipodoc" name="tipodoc">
		    					  <option value="c">Cedula</option>
		    					  <option value="r">Registro Civil</option>
		    					  <option value="t">Tarjeta de Identidad</option>
		    		  			</select>
							</td>
							<td>
								<label>Numero de Documento</label><br/>
		      		  			<input type="text" class="text" name="nrdoc" id="nrdoc"/>
							</td>
						</tr>
					</table>
				</fieldset>
		    	<fieldset>
		      		<legend>Nombres Del Paciente</legend>  		
					<table>
						<tr>
							<td><label>Primer Nombre</label><br/>
		      		  <input type="text" class="text" name="pnombre" id="pnombre"/></td>
							<td><label>Segundo Nombre</label><br/>
		      		  <input type="text" class="text" id="snombre" name="snombre"/></td>
						</tr>
						<tr>
							<td><label>Primer Apellido</label><br/>
		      		  <input type="text" class="text" name="papellido" id="papellido"/></td>
							<td><label>Segundo Apellido</label><br/>
		      		  <input type="text" class="text" id="sapellido" name="sapellido"/></td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
				<legend>Datos Generales del Paciente</legend>
					<table>
						<tr>
							<td>
								<label>Celular</label><br/>
								<input type="text" class="text" name="celular" value="3xx xxx xxxx"/>
							</td>
							<td>
								<label>Telefono</label><br/>
								<input type="text" class="text" name="telefono" value="xxx xxxx"/>
							</td>
						</tr>
						<tr>
							<td>
								<label>Fecha de Nacimiento</label><br/>
								<input type="text" class="date text" name="nacimiento" value="aaaa-mm-dd"/>	
							</td>
							<td>
								<label>Sexo</label><br/>
			  		    		<input type="radio" name="sexo" value="f" checked/>Femenino
			  		    		<input type="radio" name="sexo" value="m"/>Masculino
							</td>
						</tr>
						<tr>
							<td>
								<label>País de procedencia</label><br/>
								Autocompletado?
							</td>
							<td>
								<label>UBICACION!!!!</label><br/>
								<label>Ocupación</label>
								<input type="text" name="ocupacion" value="..."/> <!--Autocompletado-->
		
							</td>
						</tr>
						<tr>
							<td>
								<label>Pertenencia Étnica</label><br/>
								<select multiple="multiple"></select>						
							</td>
							<td>
								<label>Grupo Poblacional</label><br/>
								<select multiple="multiple"></select>
							</td>
						</tr>
					</table>
					
				</fieldset>
				<fieldset>
					<legend>Administradora de servicios de Salud</legend>
					<table>
						<tr>
							<td>
								<label>Tipo de régimen de Salud</label><br/>
								<select>
									<option>EPS</option>
									<option>SISBEN</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>
								<label>Administradora de servicios de salud</label><br/>
								Autocompletado?
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>Condición Final</legend>
					
					<div class="span-4">
						<input type="radio" name="condicion_final" value="v" checked/><label>Vivo</label><br/>
						<input type="radio" name="condicion_final" value="m"/><label>Muerto</label><br/>
					</div>
					<div class="span-6">
						<label>Fecha de defunción</label>
						<input type="text" class="date" name="fecha_defuncion" value="aaaa-mm-dd"/>		
					</div>
					<div class="span-6">
						<label>Número de certificado de defunción</label>
						<input type="text" class="text" name="numero_certificado_defuncion" value="..." maxlength=10/>
					</div>
					<br/>		
						
					<div class="span-17">
								<label>Causa básica de muerte</label><br/>
								<input type="text" class="text" id="sapellido" name="sapellido"/>
					</div>
					<br/>
						
					<div class="span-8">
								<label>Nombre del profesional que diligencio la ficha</label>
								<input type="text" class="text" id="sapellido" name="nombre_ficha_defuncion"/>
					</div>
					<div class="span-8">
								<label>Telefono del profesional</label><br/>
								<input type="text" class="text" name="telefono_ficha_defuncion" />
					</div>
				</fieldset>
			</form>
		</div>
		<div class="span-18" id="Eventos">
			LISTA DE EVENTOS
		</div>
	</div>
</body>

</html>
